    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8" />
        <title></title>
        <style>
            body {
                margin: 0 auto;
                padding: 0px;
                font-size: 12px;
                /*background: url(images/bg.gif) repeat center 36px;*/
                text-align: center;
                background-color: #0AB6C3;
            }
            #content {
                margin: 50px auto;
                width: 960px;
                /*background: url(images/content_bg.jpg) no-repeat left top;*/
                height: 627px;
                position: relative;
                background: rgba(93, 237, 174, 0.5);
            }

            #content .tip1, #content .tip2, #content .tip3, #content .tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 {
                position: absolute;
                width: 227px;
                left: 200px;
                top: 100px;
                background-color: lawngreen;
                -webkit-border-bottom-left-radius: 20px 500px;
                -webkit-border-bottom-right-radius: 500px 30px;
                -webkit-border-top-right-radius: 5px 100px;
                box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
                -webkit-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
            }

            #content .tip1 .tip_h {
               background-color: #13d08a;
            }

            #content .tip1 .tip_h, #content .tip2 .tip_h, #content .tip3 .tip_h, #content .tip4 .tip_h, #content .tip5 .tip_h, #content .tip6 .tip_h, #content .tip7 .tip_h, #content .tip8 .tip_h {
                width: 227px;
                padding-top: 20px;
                height: 23px;
                text-align: left;
                cursor: move;
                padding-bottom: 10px;
                line-height: 23px;
            }


            #content .tip1 .tip_c, #content .tip2 .tip_c, #content .tip3 .tip_c, #content .tip4 .tip_c, #content .tip5 .tip_c, #content .tip6 .tip_c, #content .tip7 .tip_c, #content .tip8 .tip_c {
                width: 200px;
                padding-left: 12px;
                padding-right: 15px;
                min-height: 40px;
                text-align: left;
                line-height: 20px;
                max-height: 160px;
                word-wrap: break-word;
                word-break: break-all;
                overflow: hidden;
            }


            #content .tip1 .tip_f, #content .tip2 .tip_f, #content .tip3 .tip_f, #content .tip4 .tip_f, #content .tip5 .tip_f, #content .tip6 .tip_f, #content .tip7 .tip_f, #content .tip8 .tip_f {
                width: 227px;
                height: 53px;
                padding-top: 20px;
            }
            #content .close, #content .close2 {
                float: left;
                font-size: 12px;
                cursor: pointer;
                color: #000000;
            }
            .clr {
                clear: both;
                overflow: auto;
                display: block;
                height: 0px;
            }

            #content .name {
                float: right;
                padding-right: 15px;
                text-align: right;
                font-size: 14px;
                line-height: 35px;
                color: #C0F;
            }
            #content .num {
                float: left;
                padding-left: 7px;
                width: 195px;
            }
            #content div:before{
                position: absolute;
                display: block;
                content: "";
                left: 100px;
                top: -11px;
                width: 30px;
                height: 25px;
                background-color: #c0edef;
                opacity: 0.5;
            }
            #content .tip1 .tip_h .close{
                font-size: 20px;
                color: #ae1614;
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
    <!--纸条墙-->
    <div id="content">

    </div>

    <script>
    //模拟数据库，获取信息
    var messages = [
        {"id": 1, "name": "mahu", "content": "今天你拿苹果支付了么", "time": "2016-02-17 00:00:00"},
        {"id": 2, "name": "haha","content": "今天天气不错，风和日丽的", "time": "2016-02-18 12:40:00"},
        {"id": 3, "name": "jjjj", "content": "常要说的事儿是乐生于苦", "time": "2016-03-18 12:40:00"},
        {"id": 4, "name": "9.8的妹纸", "content": "把朋友家厕所拉堵了 不敢出去 掏了半小时了都", "time": "2016-03-18 12:40:00"},
        {"id": 5, "name": "雷锋ii.", "content": "元宵节快乐", "time": "2016-02-22 12:40:00"},
        {"id": 6, "name": "哎呦哥哥.", "content": "据说今晚央视的元宵晚会导演和春晚导演是同一个人，真是躲得过初一，躲不过十五。", "time": "2016-02-22 01:30:00"},
        {"id": 7, "name": "没猴哥，不春晚", "content": "小明:“一点也不觉得，老师你都四十多岁了，不也是年年在三年级混日子吗？羞愧的应该是你”。老师:……", "time": "2016-02-22 01:30:00"},
        {"id": 8, "name": "哎呦杰杰.", "content": "真搞不懂你们地球人，月亮有什么好看的，全是坑，还是对面那哥们好看，", "time": "2016-02-22 01:30:00"},
        {"id": 9, "name": "哎呦哎呦", "content": "今天哪里的烟花最好看！！？答：朋友圈。。。", "time": "2016-02-22 02:30:00"}
        ];

    //需求1：模拟数据库获取信息，然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。
    //需求2：点击内容，提高层级；点击关闭按钮，删除tip标签；双击顶部，删除标签.....
    //需求1：模拟数据库获取信息，然后在页面上生成数组的长度个tip,然后分别问起内容进行修改。
    //步骤：
    //获取相关元素
    var content = document.getElementById("content");

    //循环生成div标签，然后为innerHTML属性添加内容
    for (var i = 0; i < messages.length; i++) {
    //生成新标签
        var newDiv = document.createElement("div");
    //绑定类名和ID
       newDiv.className = "tip1";
       newDiv.id = "tip" + messages[i].id;
    //改变位置
       var topValue = parseInt(Math.random() * 400);
       var leftValue = parseInt(Math.random() * 700);
       newDiv.style.top = topValue + "px";
       newDiv.style.left = leftValue + "px";
    //赋值内容
     newDiv.innerHTML = '<div class="tip_h" title="双击关闭纸条">' +
                            '<div class="num">第[49568]条 ' + messages[i].time + '</div>' +
                             '<div class="close" title="关闭纸条" >×</div>' +
                             '<div class="clr"></div>' +
                        '</div>' +
                        '<div class="tip_c">' + messages[i].content + '</div>' +
                        '<div class="tip_f">' +
                             '<div class="name">' + messages[i].name + '</div>' +
                             '<div class="clr"></div>' +
                        '</div>';
    //把新创建的元素放入content里面
            content.appendChild(newDiv);

    //绑定事件 提高层级
        newDiv.onclick = fn;
    //点击关闭盒子
        var closeDiv = newDiv.getElementsByClassName("close")[0];
         closeDiv.onclick = function() {
            content.removeChild(this.parentNode.parentNode);
    }
    //双击关闭按钮类名叫做tip_h
    var dbDiv = newDiv.getElementsByClassName("tip_h")[0];
    dbDiv.ondblclick = function() {
    content.removeChild(this.parentNode);
    }
    var index = 1;
    function fn() {
    this.style.zIndex = index;
    index++;
    }
    }
    </script>

    </body>
    </html>